<template>
<div>
  <Breadcrumb />
   <div class="listHeader">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="medium">
        <el-form-item label="预定编号">
          <el-input v-model="formInline.name" size="small" placeholder="产品名称"></el-input>
        </el-form-item>
        <el-form-item label="预定时间">
          <el-date-picker  v-model="formInline.time" size="small" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch" size="small">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button type="warning" size="small" @click="orderCollect">订单汇总</el-button>
      <download-excel
              class="export-excel-wrapper"
              :data="DetailsForm"
              :fields="json_fields"
              :header="title"
              name="订单列表.xls">
            <el-button type="warning" size="small" @click="getOut">导出</el-button>
      </download-excel>
      <div class="content">
        <el-table  :data="tableData" border style="width:100%;" header-cell-class-name="active-header"
        cell-class-name="table-center" @select="select">
            <el-table-column  type="selection" width="55" align="center" :selectable="selectable"></el-table-column>
            <el-table-column prop="code" label="订单编号" width="180" align="center">
              <template slot-scope="scope">
                <span @click="OrderDesc(scope.row)" style="color:blue;cursor:pointer;">{{ scope.row.code}}</span>
               </template>
            </el-table-column>
            <el-table-column prop="ordername" label="下单人" width="180" align="center"></el-table-column>
            <el-table-column prop="company" label="所属单位" align="center"></el-table-column>
            <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
            <el-table-column prop="yudingTime" label="预定时间" align="center">
              <!-- <template slot-scope="scope">
                {{  dayjs(scope.row.yudingTime).format('YYYY-MM-DD') }}
              </template> -->
            </el-table-column>
            <el-table-column prop="price" label="订单总价格" align="center"></el-table-column>
            <el-table-column prop="huizongStatus" label="汇总状态" align="center">
                <!-- <template slot-scope="scope">
                    {{  scope.row.huizongStatus ===1 ? '未汇总' :'已汇总' }}
                </template> -->
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination  :pageSize="pageSize" :total="total" @getPagination="getPagination" />
      </div>
      <!-- 抽屉 -->
      <OrderDesc ref="orderChild" />
  </div>
</div>
</template>
<script>
import dayjs from 'dayjs'
import Pagination from '@/components/Pagination.vue'
import OrderDesc from './OrderDesc.vue'
export default {
  name: "List",
  components:{
    Pagination,
    OrderDesc
  },
  data(){
    return {
        formInline:{
            name:'',
            time:'',
        },
        tableData:[],
        total:10,
        pageSize:8,
        ids:[],
        DetailsForm:[],   // 要导出的数据 [{},{}]
        json_fields:{
           //"订单编号":"code",   // 数字过长处理
           "订单编号":{
               field:"code",
               callback:value=>{
                 return '&nbsp;'+ value;
               }
           },
           "下单人":"ordername",
           "所属单位":"company",
           "联系电话":"phone",
           "预定时间":"yudingTime",
           "订单总价格":"price",
           "汇总状态":"huizongStatus",
        },
        title:'xxx公司采购系统订单列表',
    }
  },
  methods:{
     dayjs,
     onSearch(){

     },
     // 点击进入详情页 
     OrderDesc(){
        this.$refs.orderChild.drawer = true;
        this.$refs.orderChild.getDetail();
     },
     // 禁用
     selectable(row,index){
        if(row.huizongStatus==="未汇总"){
          return true;
        }else{
          return false;
        }
     },
     // 获取分页页码
     getPagination(page){
       this.orderList(page)
     },
     async orderList(){
        //let res = await this.$api.orderList({page})
        let res = await this.$api.orderList()
        if(res.data.status ===200){
            //this.tableData = res.data.data.list
            let arr = res.data.data.list
            arr.forEach(ele=>{
              ele.huizongStatus = ele.huizongStatus==1?'未汇总':'已汇总'
              ele.yudingTime = dayjs(ele.yudingTime).format('YYYY-MM-DD')
            })
            this.tableData = arr;
            this.total = res.data.total;
            this.pageSize = res.data.pageSize;
        }else{
            this.tableData = []
            this.total = 10;
            this.pageSize = 8;
        }
     },
     // 订单汇总
     async orderCollect(){
        // 判断 ids 的长度 >=2 
        if(this.ids.length >=2){
           //let res = await this.$api.changeStatus({ids:this.ids.join(',')})
           //let res = await this.$api.changeStatus()
           const res = { data:{ status:200,msg:'汇总成功' } }
           if(res.data.status===200){
              this.$message({
                type: 'success',
                message: `汇总成功`
              })
              this.orderList();
           }
        }else{
          this.$alert('汇总清单', '汇总清单至少要有2条信息', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `取消汇总`
            });
           }
          });
        }
     },
     // 导出
     getOut(){
         if(this.DetailsForm.length === 0){
             this.$message({
                type: 'warning',
                message: `请先选中未汇总的数据`
              })
         }
     },
     // 选中
     select(selection,row){
        let arr = [];
        selection.forEach(ele=>{
           arr.push(ele.id)
        })
        this.ids = arr;
        this.DetailsForm = selection;
     }
  },
  created(){
      this.orderList()
  }
}
</script>

<style lang="less" scoped>
    .listHeader{
      border:1px solid #eee;
      padding:10px;
      border-radius:6px;
      background: #fff;
    }
    
    .content{
        margin-top:20px;
    }
    
   .export-excel-wrapper{
      display: inline-block;
      margin-left: 10px;
      .el-button--warning{
        padding-left:30px ;
        padding-right:30px;
       }
    }

    


    </style>